<!--仪表盘日期过滤组件条件框封装-->
<template>
    <div style="width: 100%;height: 100%">
<!--        <div>-->
<!--            <span>日期</span>-->
<!--        </div>-->
<!--        <el-input placeholder="无限制" suffix-icon="el-icon-date" size="mini"-->
<!--            @click.native="handleClick" v-model="dateValue"-->
<!--        ></el-input>-->
<!--        <div v-if="tabShow">-->
<!--            <el-tabs>-->
<!--                <el-tab-pane label="日期" name="first">-->
<!--                    <el-date-picker-->
<!--                        v-model="datePickerValue"-->
<!--                        type="date"-->
<!--                        placeholder="选择日期">-->
<!--                    </el-date-picker>-->
<!--                </el-tab-pane>-->
<!--                <el-tab-pane label="动态时间" name="second">-->
<!--                    <div>-->
<!--                        <span>相对当前时间</span>-->
<!--                        <el-checkbox-group>-->
<!--                            <el-checkbox label="year">年</el-checkbox>-->
<!--                            <el-checkbox label="season">季</el-checkbox>-->
<!--                            <el-checkbox label="month">月</el-checkbox>-->
<!--                            <el-checkbox label="week">周</el-checkbox>-->
<!--                            <el-checkbox label="day">天</el-checkbox>-->
<!--                            <el-checkbox label="workDay">工作日</el-checkbox>-->
<!--                        </el-checkbox-group>-->
<!--                    </div>-->
<!--                </el-tab-pane>-->
<!--            </el-tabs>-->
<!--        </div>-->
        <span>日期</span>
        <el-date-picker
            :style="status === '1'? '':'width: 94.5%'"
            v-model="date"
            @change="getChange"
            type="date"
            size="mini"
            value-format="yyyy-MM-dd"
            placeholder="选择日期">
        </el-date-picker>
        <template  v-if="status === '1'">
            <el-button size="mini" round @click="getDateFilter">确定</el-button>
        </template>
    </div>
</template>

<script>
    import ajax from '@api/ajax'
    import {SAVE_FILTER_INFO} from '@api/url'
    export default {
        name: 'DateFilterComponent',
        data () {
            return {
                dateValue: null,
                tabShow: false,
                date: ''
            }
        },
        watch: {
            updatePickerValue () {
                if (this.status === '1') {
                    this.date = JSON.parse(this.updatePickerValue.value).value[0]
                }
            }
        },
        props: {
            updatePickerValue: {
                type: Object
            },
            inserDatePickerValue: {
                type: String
            },
            status: {
                type: String,
                default: function () {
                    return '1'
                }
            }
        },
        methods: {
            handleClick () {
                this.tabShow = true
            },
            getDateFilter () {
                if (this.status === '1') {
                    this.updatePickerValue.optMode = 'U'
                    let tempObject = JSON.parse(this.updatePickerValue.value)
                    tempObject.value = []
                    tempObject.value.push(this.date)
                    this.updatePickerValue.value = JSON.stringify(tempObject)
                    ajax.post(SAVE_FILTER_INFO, this.updatePickerValue).then(res => {
                        this.$emit('getDateFlag')
                    })
                } else {
                    this.$emit('getDateFilter', this.date)
                }
            },
            getChange () {
                if (this.status === '0') {
                    this.$emit('getDateFilter', this.date)
                }
            },
            clearInput () {
                this.date = ''
            },
            setDateValue (item) {
                this.date = JSON.parse(item.value).value[0]
            }
        },

        mounted () {
            console.info(this.status)
            if (this.status === '1') {
                this.date = JSON.parse(this.updatePickerValue.value).value[0]
            }
            if (this.status === '0') {
                this.date = this.inserDatePickerValue
            }
        }

    }
</script>

<style scoped>

</style>
